<meta name="csrf-token" content="{{ csrf_token() }}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="/css/app22.css">
<script type="text/javascript" src="/js/rem.js"></script>
<link rel="stylesheet" type="text/css" href="/css/swiper.min.css"/>
<script type="text/javascript" src="/js/swiper.min.js"></script>
<div style="margin-bottom: 20px;">
  <a href="javascript:history.back(-1)" class="btn btn-primary btn-lg active" role="button"><返回</a>
</div>
<div class="box box-default">
  <div id="list" style="margin-left: 10%;margin-right: 10%;">
        <div>
          <p style="margin-top: 10px;">校区：{{$ques_detail['compus']}}</p>
        </div>
        <div>
        	<p style="margin-top: 10px;">问题种类：{{$ques_detail['ques_type']}}</p>
        	<p style="margin-top: 10px;">处理部门：{{$ques_detail['dep']}}</p>
        </div>
        <div style="margin-top: 10px;">
          异常描述：<textarea class="form-control" rows="3" disabled>{{$ques_detail['ques_desc']}}</textarea>
        </div>
        <div class="po-cmt">
          <div class="po-hd">
            <div class="post" style="margin-top: 10px;">
              图片：
              <p>
                @for($i=0; $i < count(explode(";", $ques_detail['ques_img'])); $i++)
                <img class="list-img" src="{{explode(';', $ques_detail['ques_img'])[$i]}}" style="height: 80px;">
                @endfor
              </p>
            </div>
          </div>
        </div>
        <div>
          <p style="margin-top: 10px;">状态：{{$ques_detail['handle_status']}}
          @if($ques_detail['handle_status']=='长期处理中')
          截止日期：{{$ques_detail['end_date']}}(还有xx天)
          @endif
          </p>
        </div>
        <div style="margin-top: 10px;">
          解决办法：<textarea class="form-control" rows="3" disabled>{{$ques_detail['handle_desc']}}</textarea>
        </div>
        <div class="po-cmt">
          <div class="po-hd">
            <div class="post" style="margin-top: 10px;">
              图片：
              <p>
                @for($i=0; $i < count(explode(";", $ques_detail['handle_img'])); $i++)
                <img class="list-img" src="{{explode(';', $ques_detail['handle_img'])[$i]}}" style="height: 80px;">
                @endfor
              </p>
            </div>
          </div>
        </div>
  </div>
</div>
<div class="big_img">
	<div class="swiper-container2">
		<div class="swiper-wrapper"> </div>
	</div>
</div>
<script>
  $(document).ready(function(){
    /*调起大图 S*/
     var mySwiper = new Swiper('.swiper-container2', {
          loop: false,
          pagination: '.swiper-pagination2',
          })
      $("#list").on("click", ".post img", 
      function() {
          var imgBox = $(this).parents(".post").find("img");
          //alert(imgBox);
          var i = $(imgBox).index(this);
          //alert(i);
          $(".big_img .swiper-wrapper").html("")

          for(var j = 0 ,c = imgBox.length; j < c ;j++){
           $(".big_img .swiper-wrapper").append('<div class="swiper-slide"><div class="cell"><img src="' + imgBox.eq(j).attr("src") + '" / ></div></div>');
          }
          mySwiper.updateSlidesSize();
          mySwiper.updatePagination();
          $(".big_img").css({
              "z-index": 1001,
              "opacity": "1"
          });
          mySwiper.slideTo(i, 0, false);
          return false;
      });
    
      $(".big_img").on("click", 
      function() {
          $(this).css({
              "z-index": "-1",
              "opacity": "0"
          });
      });
  });
</script>